<template>
  <div class="detail">
    <!-- 导航栏 -->
    <div class="header1">
        <van-nav-bar title="详情页" @click-left="onClickLeft"  @click-right="onClickRight">
        <template #left>
        <van-icon name="arrow-left" size="25" />
        </template>
        <template #right>
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          placement="bottom-end"
          :actions="actions"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="ellipsis" size="25" />
          </template>
        </van-popover>
        </template>
        </van-nav-bar>
    </div>
    <!-- 轮播图 -->
    <div class="conteiner">
        <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
        <img :src="item" />
        </van-swipe-item>
        </van-swipe>
    </div>
    <!-- 价钱 -->
    <div class="money">
      <p>{{price}}</p>
    </div>
    <!-- 商品名称 -->
    <div class="title">
      <h3>{{title}}</h3>
    </div>
    <!-- 商品数量 -->
    <div class="num">
      <button @click="jian">-</button>
      <input type="number" v-model="numbers">
      <button @click="jia">+</button>
    </div>
    <!-- 商品详情页底部导航区 -->
    <div class="botton">
      <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="tocart"/>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>

  <!-- 分享(弹出的) -->
  <!-- <van-cell title="显示分享面板" @click="showShare = true" /> -->
  <van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect1"
  />
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Lazyload, Icon, Popover, ShareSheet,GoodsAction, GoodsActionIcon, GoodsActionButton,} from 'vant';
// import { Toast } from 'vant';
import { AddCart } from '../api/cart'
Vue.use(NavBar);
Vue.use(Lazyload);
Vue.use(Icon);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

import { getBannerList } from "../api/detail";
export default {
  data () {
    return {
      bannerList: [],
      showPopover: false,
      actions: [{ text: '首页', icon: 'bars' },
        { text: '消息', icon: 'chat-o dot' },
        { text: '分享', icon: 'share-o' },
      ],
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      price:0,
      title:'',
      numbers: 1,
      proid:'',
    };
  },
  mounted () {
    getBannerList(this.$route.params.proid).then(data=>{
      console.log(data);
      console.log(data.data.data.banners[0].split(","));
      //轮播图
      this.bannerList = data.data.data.banners[0].split(",");
      //价钱
      this.price = data.data.data.originprice;
      //标题
      this.title = data.data.data.proname;
      //商品id
      this.proid = data.data.data.proid;
    })
  },
  methods: {
    // 点击页面左上角返回
    onClickLeft() {
      this.$router.back();
    },
    // 点击扩展（页面右上角点点）
    onClickRight() {
      console.log(22);
    },
    // 点击扩展（页面右上角的点点）里的内容
    onSelect(action,index) {
      console.log(action.text);
      switch (index) {
        case 0:
          this.$router.push('/home')
          break;
        case 1:
          
          break;
        case 2:
          this.showShare = true;
          break;
      
        default:
          break;
      }
    },
    // 点击取消或者其他地方，分享取消
    onSelect1(option) {
      console.log(option.name);
      this.showShare = false;
    },
    // 点击商品数量-号
    jian() {
      if (this.numbers == 1) {
        this.numbers = 1;
      } else {
        this.numbers--;
      }
    },
    // 点击商品数量+号
    jia() {
      this.numbers++
    },
      // 点击加入购物车
    addCart() {
      // 首先判断是否登录，未登录先登录
      if (localStorage.getItem('token')) {
        AddCart({userid:localStorage.getItem('userid'),proid:this.proid,num:this.numbers}).then(res=>{
          console.log(res);
        })
      } else {
        this.$router.push('/login')
      }
    },
    // 点击购物车跳转
    tocart() {
      this.$router.push('/cart')
    }
  }
}
</script>

<style scoped>
.my-swipe {
  height: 2.5rem;
}
.my-swipe img {
  width: 100%;
}
.money,.title {
  padding: 0 20px;
  margin: 20px 0;
}
</style>